.chat-outbox
  position: relative;
  width: 100%
  >.top
    width: 100%
    overflow hidden
    box-sizing border-box
    >.add-room-box
      width: 100%
      height: 5rem
      padding: 0 1rem
      line-height: 5rem
    ul.room-list
      position: relative;
      width auto
      top: 50%
      transform translateY(-50%)
      display flex
      align-items center
      padding: 0 1rem;
      >li
        position: relative
        max-width: 8rem
        min-width: 8rem
        height: 8rem
        margin-right: 2rem
        border-radius 50%
        cursor pointer
        transition all .3s
        box-shadow 0 0 1rem #afafaf
        background-color: #f1f1f1
        div.room-box
          position relative
          width: 100%
          height: 100%
          >img
            position: absolute;
            top: 0
            left: 0
            width: 100%
            height: 100%
            border-radius 50%
            object-fit cover
      >li.select
        animation jump 1.8s infinite
      >li:hover
        transform scale(1.2)
  >.chat-box
    position: relative;
    margin: 2rem auto 15rem auto;
    width: 83rem
    height: 52rem
    border: .1rem solid #d1d1d1;
    background: #fff;
    border-radius: .5rem
    box-shadow: 0 0 2rem rgba(0,0,0,.2);
    >.middle
      position: relative;
      width: 100%
      height calc(100% - 4rem);
      display flex
      >div
        height: 100%
      >.left
        width: 23rem
        overflow-y auto
        user-select none
        border-right: .1rem solid #f1f1f1
        .left-item {
          display: flex;
          align-items: center;
          padding: 1rem
  
          &:hover {
            background: #f3f3f3;
          }
  
          .left-item-text {
            flex-grow: 1;
            overflow: hidden;
            margin-left: 1rem
  
            .group-name {
              display: flex;
              justify-content: space-between;
              align-items: center;
  
              span:first-child {
                color: rgba(0, 0, 0, 0.75);
                font-size: 1.4rem
                line-height: 1.4rem
              }
  
              span:last-child {
                margin-top: .3rem
                font-size: 1.2rem
                color: #abaaab;
              }
            }
  
            .group-message {
              display: flex;
              color: #777777;
              font-size: 1.3rem
              height: 2.1rem
              overflow: hidden;
  
              &:last-child {
                flex-grow: 1;
                overflow: hidden;
              }
  
              p {
                margin-bottom: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      >.main
        width: 43rem
        border-right: .1rem solid #f1f1f1
        box-sizing border-box
        >.content
          width: 100%
          height: 32rem
          margin: 0
          border-bottom: .1rem solid #f1f1f1
          box-sizing border-box
          >.chat-list {
            height: 100%;
            overflow: auto;
            .chat-item {
              padding: 1.5rem
  
              .time {
                margin: 1rem 0;
                text-align: center;
                font-size: 1.2rem
                color: #d0cfcf;
              }
  
              .chat-item-info {
                display: flex;
                justify-content: flex-start;
  
                &.chat-right {
                  flex-direction: row-reverse;
  
                  .chat-main {
                    text-align: right;
                    margin-right: 1.2rem
  
                    .username {
                      color: #9f9f9f;
                    }
  
                    .chat-content {
                      background: #d9f4fe;
                      text-align: left;
  
                      &::before{
                        display: none;
                      }
  
                      &::after {
                        content: '';
                        position: absolute;
                        top: .8rem
                        left: 100%;
                        width: 0;
                        height: 0;
                        border-top: .3rem solid transparent;
                        border-bottom: .6rem solid transparent;
                        border-left: .6rem solid #d9f4fe;
                      }
                    }
                  }
                }
  
                .chat-main {
                  flex-grow: 1;
                  margin-left: 1.2rem
  
                  .username {
                    color: #a0abca;
                    font-size: 1.4rem
                  }
  
                  .chat-content {
                    position: relative;
                    display: inline-block;
                    max-width: 80%;
                    padding: 1.2rem
                    border-radius: .5rem
                    background: #f3f3f3;
                    word-wrap: break-word;
                    word-break: break-all;
  
                    &::before {
                      content: '';
                      position: absolute;
                      top: .8rem
                      right: 100%;
                      width: 0;
                      height: 0;
                      border-top: .3rem solid transparent;
                      border-bottom: .6rem solid transparent;
                      border-right: .6rem solid #f3f3f3;
                    }
  
                    img {
                      max-width: 100%;
                    }
  
                    p {
                      margin-bottom: 0;
                    }
                  }
                }
              }
            }
          }
        >.edit
          width: 100%
          height calc(100% - 32rem);
      >.right
        width: 17rem
        user-select none
        background: #f6f7f9;
        >.title
          width: 100%
          height: 3.2rem
          line-height: 3.2rem
          box-sizing border-box
          padding 0 1rem
          border-bottom: .1rem solid #c8c8c8
        >.admin-list
          width: 100%
          height calc(100% - 3.2rem);
          overflow-y auto
          .user-item {
            display: flex;
            align-items: center;
            color: #787677;
            font-size: 1.2rem
            padding: .5rem 1rem
            cursor pointer
  
            .avatar-box {
              position: relative;
              flex-shrink: 0;
              width: 2.4rem
              height: 2.4rem
              border-radius: 50%;
              overflow: hidden;
  
              &.mask {
                img {
                  opacity: .7;
                }
  
                div {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: rgba(0, 0, 0, 0.2);
                }
              }
            }
          }
    >.top
      position: relative;
      width: 100%
      height: 4rem
      cursor move
      user-select none
      background-color: #e9e9e9
      >.middle
        display flex
        height: 100%
        align-items center
        justify-content center
        color #67696f
      >.left
        position: absolute;
        left: .4rem
        top: 0
        height: 100%
        >ul
          height: 100%
          position: relative;
          display flex
          justify-content center
          align-items center
          >li
            position: relative;
            width: 1.2rem
            height: 1.2rem
            margin 0 .4rem 0;
            border-radius 50%
          >li.red
            background-color: #eb6a5d
          >li.yellow
            background-color: #f5c250
          >li.green
            background-color: #0bd417

.add-room-box
  width: 100%
  >li
    width: 100%
    position relative
    line-height: 4rem
    display flex
    >.left
      flex 3
      min-width 10rem
      max-width 10rem
      text-align right
      position: relative;
      display flex
      align-items center
    >.right
      flex 7
      position: relative;
      >input[type='file']
        position: absolute;
        top: 0
        left: 0
        cursor pointer
        width: 10rem
        height: 10rem
        border-radius 50%
        overflow: hidden;
        opacity 0
      >.roomImg
        width: 10rem
        height: 10rem
        margin-bottom: 1rem
        border-radius 50%
        overflow: hidden;
        border: .1rem solid #ccc
        display flex
        justify-content center
        align-items center
        >svg
          width: 60%
          height: 60%
        >img
          width: 100%
          height: 100%
          object-fit cover

section.all-chat-room-box
  width: 100%
  height: 400px
  overflow auto
  >ul
    position: relative;
    display flex
    flex-wrap wrap
    justify-content center
    >li
      position: relative;
      width: 23rem
      margin: 1.6rem
      border-radius .5rem
      border: .1rem solid #f1f1f1
      overflow hidden
      padding: 1rem
      cursor pointer
      transition all .3s
      >.top
        width: 100%
        height: 10rem
        display flex
        align-items center
        >.left
          flex 3
          >img
            width: 5rem
            height: 5rem
            border-radius 50%
        >.right
          flex 7
          height: 100%
          overflow: hidden;
          >h2
            position: relative;
            top: .2rem
            height: 2.1rem
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            font-size: 1.4rem
            font-weight: bold;
          >p
            font-size: 1.2rem
            position: relative
            top: .3rem
            margin-bottom: 0
            display flex
            align-items center
            >svg
              width 1.5rem
              height 1.5rem
          >span
            color: #fff
            padding: .3rem .4rem
            font-size: 1rem;
            font-weight: 600;
            border-radius: .25rem;
      >.bottom
        padding: .3rem .5rem 0 .5rem
    >li:hover
      box-shadow 0 0 .8rem #ccc

@keyframes jump{
  0%{
    border: .2rem solid #eb6a5d
  }
  20%{
    border: .2rem solid #EB2F96
  }
  50%{
    border: .2rem solid #f5c250
  }
  80%{
    border: .2rem solid #1890FF
  }
  100%{
    border: .2rem solid #22ddc0
  }
}
